{% extends "base.html" %}

{% block title %}{{ _('history.title') }} - {{ _('app.name') }}{% endblock %}

{% block content %}
<div class="row">
    <div class="col-md-12">
        <div class="card mb-4"></div>
            <div class="card-header d-flex justify-content-between align-items-center">
                <h2 class="card-title mb-0">{{ _('history.header') }}</h2>
                <div class="btn-group">
                    <button class="btn btn-outline-primary" id="exportHistory">
                        <i class="bi bi-download"></i> {{ _('history.export') }}
                    </button>
                    <button class="btn btn-outline-secondary" data-bs-toggle="modal" data-bs-target="#importModal">
                        <i class="bi bi-upload"></i> {{ _('history.import') }}
                    </button>
                    <button class="btn btn-outline-danger" id="clearHistory">
                        <i class="bi bi-trash"></i> {{ _('history.clear') }}
                    </button>
                </div>
            </div>
            <div class="card-body">
                <!-- 搜索栏 -->
                <div class="mb-4">
                    <div class="input-group">
                        <span class="input-group-text"><i class="bi bi-search"></i></span>
                        <input type="text" class="form-control" id="searchHistory" placeholder="{{ _('history.search.placeholder') }}">
                        <button class="btn btn-outline-secondary" type="button" id="searchButton">{{ _('history.search.button') }}</button>
                    </div>
                </div>
                
                <!-- 历史记录列表 -->
                <div class="table-responsive">
                    <table class="table table-hover">
                        <thead>
                            <tr>
                                <th>{{ _('history.table.date') }}</th>
                                <th>{{ _('history.table.summary') }}</th>
                                <th>{{ _('history.table.keywords') }}</th>
                                <th>{{ _('history.table.source') }}</th>
                                <th>{{ _('history.table.actions') }}</th>
                            </tr>
                        </thead>
                        <tbody id="historyTableBody">
                            <!-- 历史记录将通过JavaScript动态加载 -->
                        </tbody>
                    </table>
                </div>
                
                <!-- 无记录提示 -->
                <div class="text-center py-5" id="noRecordsMessage" style="display: none;">
                    <i class="bi bi-clock-history fs-1 text-muted"></i>
                    <p class="mt-3">{{ _('history.no_records') }}</p>
                </div>
                
                <!-- 加载指示器 -->
                <div class="text-center my-4" id="loadingIndicator">
                    <div class="spinner-border text-primary" role="status">
                        <span class="visually-hidden">{{ _('history.loading') }}</span>
                    </div>
                    <p class="mt-2">{{ _('history.loading') }}</p>
                </div>
            </div>
        </div>
    </div>
</div>

<!-- 详情模态框 -->
<div class="modal fade" id="detailModal" tabindex="-1" aria-labelledby="detailModalLabel" aria-hidden="true">
    <div class="modal-dialog modal-lg">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="detailModalLabel">{{ _('history.detail.title') }}</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body"></div>
                <ul class="nav nav-tabs" id="detailTabs" role="tablist">
                    <li class="nav-item" role="presentation">
                        <button class="nav-link active" id="summary-tab" data-bs-toggle="tab" data-bs-target="#summary-content" type="button" role="tab" aria-controls="summary-content" aria-selected="true">
                            {{ _('history.detail.summary_tab') }}
                        </button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" id="original-tab" data-bs-toggle="tab" data-bs-target="#original-content" type="button" role="tab" aria-controls="original-content" aria-selected="false">
                            {{ _('history.detail.original_tab') }}
                        </button>
                    </li>
                    <li class="nav-item" role="presentation">
                        <button class="nav-link" id="info-tab" data-bs-toggle="tab" data-bs-target="#info-content" type="button" role="tab" aria-controls="info-content" aria-selected="false">
                            {{ _('history.detail.info_tab') }}
                        </button>
                    </li>
                </ul>
                <div class="tab-content mt-3" id="detailTabsContent">
                    <div class="tab-pane fade show active" id="summary-content" role="tabpanel" aria-labelledby="summary-tab">
                        <h6>{{ _('history.detail.summary') }}</h6>
                        <div class="p-3 bg-light rounded" id="detailSummary"></div>
                        
                        <h6 class="mt-3">{{ _('history.detail.keywords') }}</h6>
                        <div id="detailKeywords" class="d-flex flex-wrap gap-2"></div>
                    </div>
                    <div class="tab-pane fade" id="original-content" role="tabpanel" aria-labelledby="original-tab">
                        <h6>{{ _('history.detail.original') }}</h6>
                        <div class="p-3 bg-light rounded" id="detailOriginal" style="max-height: 400px; overflow-y: auto;"></div>
                    </div>
                    <div class="tab-pane fade" id="info-content" role="tabpanel" aria-labelledby="info-tab">
                        <div class="table-responsive">
                            <table class="table table-sm">
                                <tbody>
                                    <tr>
                                        <th>{{ _('history.detail.date') }}</th>
                                        <td id="detailDate"></td>
                                    </tr>
                                    <tr>
                                        <th>{{ _('history.detail.ratio') }}</th>
                                        <td id="detailRatio"></td>
                                    </tr>
                                    <tr>
                                        <th>{{ _('history.detail.source') }}</th>
                                        <td id="detailSource"></td>
                                    </tr>
                                    <tr>
                                        <th>{{ _('history.detail.id') }}</th>
                                        <td id="detailId"></td>
                                    </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </div>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-outline-secondary" id="copyDetailSummary">
                    <i class="bi bi-clipboard"></i> {{ _('history.detail.copy_summary') }}
                </button>
                <button type="button" class="btn btn-outline-secondary" data-bs-dismiss="modal">{{ _('history.detail.close') }}</button>
            </div>
        </div>
    </div>
</div>

<!-- 导入模态框 -->
<div class="modal fade" id="importModal" tabindex="-1" aria-labelledby="importModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="importModalLabel">{{ _('history.import_modal.title') }}</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <form id="importForm">
                    <div class="mb-3">
                        <label for="importFile" class="form-label">{{ _('history.import_modal.file_label') }}</label>
                        <input class="form-control" type="file" id="importFile" accept=".json" required>
                        <div class="form-text">{{ _('history.import_modal.file_help') }}</div>
                    </div>
                    <div class="mb-3 form-check">
                        <input type="checkbox" class="form-check-input" id="mergeRecords" checked>
                        <label class="form-check-label" for="mergeRecords">{{ _('history.import_modal.merge') }}</label>
                    </div>
                </form>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{ _('history.import_modal.cancel') }}</button>
                <button type="button" class="btn btn-primary" id="importButton">{{ _('history.import_modal.import') }}</button>
            </div>
        </div>
    </div>
</div>

<!-- 确认清空模态框 -->
<div class="modal fade" id="confirmClearModal" tabindex="-1" aria-labelledby="confirmClearModalLabel" aria-hidden="true">
    <div class="modal-dialog">
        <div class="modal-content">
            <div class="modal-header">
                <h5 class="modal-title" id="confirmClearModalLabel">{{ _('history.clear_modal.title') }}</h5>
                <button type="button" class="btn-close" data-bs-dismiss="modal" aria-label="Close"></button>
            </div>
            <div class="modal-body">
                <p>{{ _('history.clear_modal.message') }}</p>
                <p class="text-danger"><strong>{{ _('history.clear_modal.warning') }}</strong></p>
            </div>
            <div class="modal-footer">
                <button type="button" class="btn btn-secondary" data-bs-dismiss="modal">{{ _('history.clear_modal.cancel') }}</button>
                <button type="button" class="btn btn-danger" id="confirmClearButton">{{ _('history.clear_modal.confirm') }}</button>
            </div>
        </div>
    </div>
</div>

<!-- 错误提示 -->
<div class="alert alert-danger" id="errorAlert" style="display: none;" role="alert">
    <i class="bi bi-exclamation-triangle-fill"></i> <span id="errorMessage"></span>
</div>
{% endblock %}

{% block extra_js %}
<script src="{{ url_for('static', filename='js/history.js') }}"></script>
{% endblock %}